<template>
  <view style="background-color: rgb(246,248,251);min-height: 1500rpx;">
  <view class="limit">
    <text>可用合成额度</text>
    <text class="limit-number">{{ shopList.length? useNum:'暂无店铺' }}</text>
  </view>
  <view class="bottom">
    <text style="font-size: 32rpx; font-weight: 700; margin: 0 0 30rpx">剪辑任务</text>
    <view v-if="taskList.length">
      <view class="box" v-for="(item, index) in taskList" :key="index" @click="goPreview(item)">
        <view class="task-left">
          <image v-if="item.start==2" mode="aspectFill" style="width: 192rpx; height: 136rpx;border-radius: 8rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/jjku_jjrwufmian_wscheng.png"/>
          <image v-else mode="aspectFill" style="width: 192rpx; height: 136rpx;border-radius: 8rpx;" :src="item.imagePath"/>
          <view class="num">{{item.start==2?item.maxNum:item.vnum}}</view>
          <view class="crafting" v-if="item.start==2">合成中({{ item.creat }})</view>
          <view class="mark" v-if="item.start==3">未发布{{ item.whetherWhether2 }}</view>
        </view>
        <view class="task-right">
          <view class="task-name">{{ item.taskName }}</view>
          <view class="task-type">{{ getType(item.type) }}</view>
        </view>
        <image @click.stop="goPublish(item)" style="width: 48rpx;height: 48rpx;position: absolute;top: 12rpx;right: 12rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/jjku_icon_ewmaquanbu.png"/>
      </view>
    </view>
    <view class="kong" v-else>
      <image
        class="img"
        src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/state_empty.png"
        mode=""
      />
      <text>暂无任务</text>
    </view>
  </view>
  <view class="fixed">
    <view class="creat-video" @click="gotoQuest">
      <image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_czspin.png" mode="" />
      <view>智能剪辑</view>
    </view>
    <view class="creat-video" @click="gotoOneClick">
      <image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_yjcpian.png" mode="" />
      <view>一键成片</view>
    </view>
    <view class="creat-video" @click="gotoCut">
      <image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_cyspin.png" mode="" />
      <view>创意视频</view>
    </view>
  </view>
  <view class="bottom-white"></view>

  <uni-popup ref="code">
    <view class="erweima">
      <image
        class="bgi"
        src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/erWeiMa.png"
        mode=""
      />
      <image
        class="close"
        @click="popupClose"
        src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/button_hygbi.png"
        mode=""
      />
      <view class="center">
        <image
          v-if="src"
          :src="src"
          @longpress="saveImg()"
          style="width: 420rpx; height: 420rpx; margin-bottom: 14rpx"
        />
        <text>扫描二维码就可以发布视频</text>
      </view>
    </view>
  </uni-popup>
  <canvas
    style="width: 420rpx; height: 420rpx; margin: 0 auto; top: -99999px"
    id="canvas"
    canvas-id="myQrcode"
  ></canvas>
</view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onPullDownRefresh, onReachBottom, onLoad, onShow } from "@dcloudio/uni-app";
import { httpRequest } from "../../utils/http";
import drawQrcode from "../../utils/weapp.qrcode.esm.js";
const shop = ref(uni.getStorageSync("shop").length ? uni.getStorageSync("shop") : null);
// const change = (e)=>{
// 	e == 0 ? isShow.value = true : isShow.value = false
// 	pageNum.value = 1
// 	videoList.value = []
// 	getVideos()
// }
const shopId = ref(null);
const videoList = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(1);
const text = ref("");
const flag = ref(-1);
const single = ref("");
const videoArr = ref(uni.getStorageSync("todoVideo"));
const ttUserInfo = ref([]);
const id = ref(0);
const dateTime = ref(0);
const videoId = ref(0);
const popup = ref(null);
const index = ref(0);
const src = ref("");
const shopList = ref([]);
const useNum = ref('')
shopList.value = uni.getStorageSync("shop");
onLoad((e) => {
  index.value = e.index;
  useNum.value = shopList.value[Number(index.value)].ka?shopList.value[Number(index.value)].ka.useNum:'已过期'
  if (shop.value) {
    shopId.value = shop.value[index.value].shopId;
  }
  getTaskList();
});
onShow(() => {
  getTaskList();
});
onPullDownRefresh(()=>{
  getTaskList()
})
const innerElement = ref(null);
// const handlePageClick = (e) => {
// 	console.log(e);
// 	console.log(innerElement.value);
// 	if(innerElement.value.contains(e.target)){
// 		flag.value = -1
// 	}
// }
const popupClose = () => {
  code.value.close();
};

const getType = (e) => {
  if(e=='smart')return '智能剪辑'
  if(e=='oneClick')return '一键成片'
  if(e=='master1')return '智能口播'
  if(e=='master2')return '场景口播'
  if(e=='ori')return '创意视频'
  if(e=='same')return '剪同款'
}


const goPublish = async(e) => {
  console.log(1);
  const res = await httpRequest("/api/videoListByTaskId", "POST", {
      taskId: e.id,
    });
    console.log(res.data.videoList);
    if(!res.data.videoList.length)return uni.showToast({title:'该任务目前没有视频',icon:'none'})
  uni.navigateTo({ url: `/pageA/index/publish?item=${JSON.stringify(res.data.videoList[0])}` })
}

const gotoCut = async() => {
  uni.showLoading({
    title: '请稍后',
    mask: true
  })
  if(!shopList.value.length)return uni.showToast({title:'请先创建店铺',icon:'none'})
  const res = await httpRequest("/api/findTaskStart", "POST", {
              businessId: uni.getStorageSync("business").businessId,
            });
            uni.hideLoading()
            if(res.data){
            if(res.data.start == 2)return uni.showToast({ title: "正在生成中,请稍后", icon: "none" });
          }
  if(!shopList.value[index.value].ka)return uni.showToast({title:'您的会员已过期',icon:'none'})
  uni.redirectTo({ url: `/pageA/index/IP?Originality=1` });
}
const gotoOneClick = async() => {
  uni.showLoading({
    title: '请稍后',
    mask: true
  })
  if(!shopList.value.length)return uni.showToast({title:'请先创建店铺',icon:'none'})
  const res = await httpRequest("/api/findTaskStart", "POST", {
              businessId: uni.getStorageSync("business").businessId,
            });
            uni.hideLoading()
            if(res.data){
            if(res.data.start == 2)return uni.showToast({ title: "正在生成中,请稍后", icon: "none" });
          }
  if(!shopList.value[index.value].ka)return uni.showToast({title:'您的会员已过期',icon:'none'})
  uni.redirectTo({ url: `/pageA/index/IP?oneClick=1` });
}

const gotoQuest = async() => {
  uni.showLoading({
    title: '请稍后',
    mask: true
  })
  if(!shopList.value.length)return uni.showToast({title:'请先创建店铺',icon:'none'})
  const res = await httpRequest("/api/findTaskStart", "POST", {
              businessId: uni.getStorageSync("business").businessId,
            });
            uni.hideLoading()
            if(res.data){
            if(res.data.start == 2)return uni.showToast({ title: "正在生成中,请稍后", icon: "none" });
          }
          console.log(shopList.value[index.value]);
          console.log(shopList.value);
          console.log(index.value);
  if(!shopList.value[index.value].ka)return uni.showToast({title:'您的会员已过期',icon:'none'})
  uni.redirectTo({ url: `/pageA/index/IP?index=${index.value}` });
};

const goPreview = async(item) => {
  uni.showLoading({
    title: '加载中',
    mask: true
  })
  if ( item.start == 1) {
    uni.removeStorageSync("state");
      uni.removeStorageSync("time");
      uni.removeStorageSync("percent");
      uni.removeStorageSync('isSlice')
    uni.navigateTo({ url: "/pageA/index/IP" });
  } else if(!item.start){
    return uni.showToast({title:'正在剪切中',icon:'none'})
  }else if (item.start == 2) {
    uni.navigateTo({
      url: `/pageA/index/preview?video=${item.id}&unsynthesized=${item.maxNum}&name=${item.taskName}`,
    });
  } else {
    uni.navigateTo({
      url: `/pageA/index/preview?video=${item.id}&push1=${item.whetherWhether1}&push2=${item.whetherWhether2}&name=${item.taskName}`,
    });
  }
  uni.hideLoading()
};
const showPopup = (i) => {
  console.log(flag.value);
  console.log(i);
  if (flag.value == i) return (flag.value = -1);
  flag.value = i;
};
const delVideo = async (e) => {
  await httpRequest("/api/delShopVideo", "POST", { videoId: e });
  uni.showToast({ title: "删除成功" });
  getVideo();
  flag.value = -1;
};
const saveVideo = (tempFilePath) => {
  console.log(tempFilePath);
  uni.showLoading({
    title: "正在保存",
    mask: false,
  });
  uni.downloadFile({
    url: tempFilePath,
    success: ({ tempFilePath, statusCode }) => {
      uni.saveVideoToPhotosAlbum({
        filePath: tempFilePath,
        success: (res) => {
          console.log(res);
          uni.hideLoading();
          uni.showToast({
            title: "保存成功",
            icon: "success",
          });
        },
        fail: (error) => {
          console.log(error);
          uni.showToast({
            title: "保存失败",
            icon: "error",
          });
        },
      });
    },
    fail: (error) => {},
  });
};
const getText = () => {
  if (shop.value) {
    if (videoList.value.length) {
    } else {
      text.value = "去创建爆款视频";
    }
  } else {
    text.value = "去创建店铺";
  }
};
const goto = () => {
  if (text.value == "去创建爆款视频") {
    if (uni.getStorageSync("shop")[index.value].state == 1) {
      return uni.redirectTo({ url: `/pageA/index/IP?index=${index.value}` });
    } else {
      return uni.switchTab({ url: `/pages/index/index` });
    }
  }
  if (text.value == "去创建店铺") return uni.navigateTo({ url: "/pageC/index/shop" });
};
const goBack = () => {
  uni.navigateBack({ delta: 1 });
};

const taskList = ref([]);
const getTaskList = async () => {
  uni.showLoading({
    title: '请稍后',
    mask: false
  })
  const res = await httpRequest("/api/taskListByShopId", "POST", {
    shopId: shopId.value,
  });
  console.log(res);
  taskList.value = res.data;
    taskList.value.forEach(async(e)=>{
      const res1 = await httpRequest("/api/videoListByTaskId", "POST", {
      taskId:e.id,
      });
      e.vnum = res1.data.videoNum
    })
  taskList.value.forEach(async e=>{
    if(e.start==2){
      const res = await httpRequest("/api/videoListByTaskId", "POST", {
        taskId: e.taskId,
      });
      e.creat = res.data.videoList.length
    }
  })
  const shop = await httpRequest("/api/shopByBusinId", "POST", {
        businessId: uni.getStorageSync("business").businessId,
      });
      shopList.value = shop.data
  uni.stopPullDownRefresh()
  uni.hideLoading()
};

// const getVideos = async () => {
//   console.log(shopId.value);
//   const res = await httpRequest("/api/videoByShopId", "POST", {
//     shopId: shopId.value,
//     pageNum: pageNum.value,
//     pageSize: pageSize.value,
//   });
//   console.log(res.data);
//   videoList.value = [...videoList.value, ...res.data.dataList];
//   total.value = res.data.pageCount;
//   console.log(videoList.value);
//   if (videoList.value.length) {
//     uni.setStorageSync("video", 1);
//   }
// };
const getVideo = async () => {
  const res = await httpRequest("/api/videoByShopId", "POST", {
    shopId: shopId.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  });
  videoList.value = res.data.dataList;
};
const isShow = computed(() => {
  return videoList.value.length ? true : false;
});
console.log(isShow);
console.log(videoList.value);
//下拉刷新
// onPullDownRefresh(() => {
// 	console.log(1);
// 	pageNum.value = 1
// 	videoList.value = []
// 	getVideos()

// 	uni.stopPullDownRefresh()
// 	uni.showToast({
// 		title: '刷新成功',
// 		icon: 'success',
// 		mask: true
// 	})
// })
//上拉加载更多
// onReachBottom(() => {
//   if (pageNum.value < total.value) {
//     pageNum.value++;
//   } else {
//     return;
//   }
//   getVideos();
// });
//保存图片
const saveImg = (tempFilePath) => {
  uni.downloadFile({
    url: src.value,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (res) {
            console.log(res);
            uni.showToast({
              title: "保存二维码成功",
              icon: "none",
            });
          },
          fail: function (err) {
            console.log(err);
            uni.showToast({
              title: "保存二维码失败",
              icon: "none",
            });
          },
        });
      } else {
        uni.showToast({
          title: "下载失败",
          icon: "none",
        });
      }
    },
    fail: (fail) => {
      uni.showToast({
        title: "保存失败",
        icon: "none",
      });
    },
  });
};

//绑定抖音
const bindTiktok = () => {
  uni.navigateTo({ url: "/pageC/webview" });
};
const code = ref(null);
const url = ref("");
const width = ref(0);
const height = ref(0);
const publish = async (id) => {
  //loading
  uni.showLoading({
    title: "正在生成二维码",
    mask: false,
  });
  const res = await httpRequest("/api/uploadH5", "POST", { videoId: id });
  console.log(res);
  const video = res.data.video.videoUrl;
  const title = res.data.video.title;
  const poi = res.data.video.poiId;
  const hashTags = res.data.video.label.split("#");
  const nonce_str = res.data.str;
  const timestamp = res.data.time;
  const signature = res.data.qian;
  const position = res.data.address;
  if (poi) {
    url.value = `snssdk1128://openplatform/share?client_key=awib1ol4e2732l27&nonce_str=${nonce_str}&timestamp=${timestamp}&signature=${signature}&share_type=h5&video_path=${video}&share_to_publish=1&hashtag_list=${
      hashTags.length ? JSON.stringify(hashTags) : []
    }&title=${title ? title : ""}&poi_id=${poi}`;
  } else {
    url.value = `snssdk1128://openplatform/share?client_key=awib1ol4e2732l27&nonce_str=${nonce_str}&timestamp=${timestamp}&signature=${signature}&share_type=h5&video_path=${video}&share_to_publish=1&hashtag_list=${
      hashTags.length ? JSON.stringify(hashTags) : []
    }&title=${title ? title : ""}`;
  }
  // const url = new URL("snssdk1128://openplatform/share");
  //  let query = url.searchParams;
  //   query.append("client_key", 'awib1ol4e2732l27');
  //   query.append("nonce_str", nonce_str);
  //   query.append("timestamp", timestamp);
  //   query.append("signature", signature);
  //   query.append("share_type", "h5");
  //   query.append(
  //     "video_path",
  //     video
  //   );
  //   query.append("share_to_publish", "1");//分享到发布页 仅视频
  //   console.log(hashTags);
  //   if(hashTags.length!=0){
  //     query.append("hashtag_list", JSON.stringify(hashTags));
  //   }
  //   if(title){
  //     query.append("title",title);
  //   }
  //   if(poi){
  //   query.append("poi_id",poi);
  //   }
  //二维码
  // 提取查询参数部分
  const queryString = url.value.split("?")[1];
  // 分割查询参数字符串为键值对数组
  const paramsArray = queryString.split("&");
  // 对每个查询参数进行编码
  const encodedParamsArray = paramsArray.map((param) => {
    const [key, value] = param.split("=");
    const encodedValue = encodeURIComponent(value);
    return `${key}=${encodedValue}`;
  });

  // 构造编码后的查询参数字符串
  const encodedQueryString = encodedParamsArray.join("&");

  // 构造编码后的 URL
  const encodedUrl = url.value.split("?")[0] + "?" + encodedQueryString;
  console.log(encodedUrl);
  uni
    .createSelectorQuery()
    .select("#canvas")
    .boundingClientRect((data) => {
      console.log("获取到canvas元素的布局信息：", data);
      width.value = data.width;
      height.value = data.height;
    })
    .exec();
  setTimeout(() => {
    drawQrcode({
      width: width.value, // 必须，二维码宽度，与canvas的width保持一致
      height: height.value, // 必须，二维码高度，与canvas的height保持一致
      canvasId: "myQrcode",
      background: "#ffffff", //	非必须，二维码背景颜色，默认值白色
      foreground: "#000000", // 非必须，二维码前景色，默认值黑色 	'#000000'
      // ctx: wx.createCanvasContext('myQrcode'), // 非必须，绘图上下文，可通过 wx.createCanvasContext('canvasId') 获取，v1.0.0+版本支持
      text: encodedUrl, // 必须，二维码内容
    });
  }, 500);
  setTimeout(() => {
    uni.canvasToTempFilePath({
      canvasId: "myQrcode",
      success: async (res) => {
        console.log(res);
        const { data } = await uni.uploadFile({
          url: "https://www.diandianyouke.cn:8081/api/uploadErWeiMa",
          filePath: res.tempFilePath,
          name: "ewm",
          formData: {
            businessId: uni.getStorageSync("business").businessId,
          },
        });

        console.log(JSON.parse(data).data);
        src.value = JSON.parse(data).data;
      },
    });
    uni.hideLoading();
    code.value.open("center");
  }, 1500);
};
// const scanQRCode = () => {
//       uni.previewImage({
//             urls: [],
//             current:res.tempFilePath,
//             indicator:'default',
//             loop:false,
//             success: (result) => {
//                 console.log(result);
//             }
//         })
//     }
const formatTimestampToDateTime = (timestamp) => {
  const date = new Date(timestamp); // 使用时间戳创建一个日期对象
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月份从0开始，需要加1
  const day = date.getDate().toString().padStart(2, "0");
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  const seconds = date.getSeconds().toString().padStart(2, "0");

  const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

  return formattedDateTime;
};
</script>

<style scoped lang="scss">
.limit {
  width: 690rpx;
  height: 196rpx;
  border-radius: 24rpx;
  background: linear-gradient(
    135deg,
    rgba(200, 104, 252, 1) 0%,
    rgba(85, 77, 255, 1) 100%
  );
  box-shadow: 0rpx 6rpx 40rpx rgba(84, 16, 201, 0.3);
  margin: 30rpx;
  margin-bottom: 48rpx;
  padding: 36rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  .limit-number {
    font-size: 48rpx;
    margin-top: 18rpx;
    font-weight: 500;
  }
}
.back {
  position: absolute;
  top: 80rpx;
  left: 16rpx;
  width: 48rpx;
  height: 48rpx;
}
.xinshou {
  width: 100%;
  height: 454rpx;
}
.bottom {
  overflow-x: hidden;
  width: 100%;
  border-radius: 42rpx 42rpx 0 0;
  padding: 30rpx;
  box-sizing: border-box;
  padding-top: 0;
  margin-top: 30rpx;
  .kong {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    overflow: hidden;
    font-size: 24rpx;
    color: rgb(144, 147, 153);
    .img {
      width: 610rpx;
      height: 368rpx;
      margin-top: 132rpx;
      margin-bottom: 42rpx;
    }
  }
  .box {
    position: relative;
    display: flex;
    align-items: center;
    width: 690rpx;
    height: 196rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 36rpx 30rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
    margin-top: 30rpx;
    .task-left{
      position: relative;
      width: 192rpx;
      height: 136rpx;
      border-radius: 8rpx;
      .num{
        width: 36rpx;
        height: 36rpx;
        position: absolute;
        top: 12rpx;
        right: 12rpx;
        text-align: center;
        line-height: 36rpx;
        font-size: 24rpx;
        color: #fff;
        border-radius: 4rpx;
        background-color: #121212;
      }
      .mark{
        width: 192rpx;
        height: 138rpx;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 8rpx;
        background:linear-gradient(0deg,rgba(0,0,0,1)0%,rgba(0,0,0,0) 100%);
        font-size: 24rpx;
        padding-top: 88rpx;
        text-align: center;
        box-sizing: border-box;
        color: #fff;
      }
      .crafting{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% ,-50%);
        white-space: nowrap;
        font-size: 28rpx;
        color: #fff;

      }
    }
    .task-right{
      margin-left: 24rpx;
      .task-name{
        font-size: 32rpx;;
        color: rgb(69, 70, 74);
        margin-bottom: 12rpx;
        font-weight: 700;
      }
      .task-type{
        font-size: 28rpx;
        color: rgb(144,147,153);

      }
    }
  }
  .bottom-true-text {
    margin-left: 16rpx;
    font-size: 24rpx;
    color: rgba(255, 55, 71, 1);
    margin-bottom: 16rpx;
  }
  .bottom-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 761rpx;
    margin-top: 40rpx;
  }
  .null {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 334rpx;
    height: 260rpx;
    .zanwu {
      width: 334rpx;
      height: 192rpx;
    }
  }
  .label {
    display: flex;
    align-items: center;
    margin-top: 16rpx;
    .label-top {
      display: flex;
      .biaoti {
        width: 510rpx;
        height: 82rpx;
        font-size: 28rpx;
        color: rgba(69, 70, 74, 1);
        white-space: nowrap; /* 禁止文本换行 */
        overflow: hidden; /* 隐藏文本溢出部分 */
        text-overflow: ellipsis; /* 在文本溢出时显示省略号 */
      }
      .huati {
        width: 510rpx;
        height: 82rpx;
        font-size: 24rpx;
        color: rgba(144, 147, 153, 1);
        white-space: nowrap; /* 禁止文本换行 */
        overflow: hidden; /* 隐藏文本溢出部分 */
        text-overflow: ellipsis; /* 在文本溢出时显示省略号 */
      }
    }
    .popup {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      position: absolute;
      top: 45rpx;
      left: -32rpx;
      width: 192rpx;
      height: 198rpx;
      z-index: 999;
      background-color: #fff;
    }
    .label-bottom {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 16rpx;

      .baocun {
        width: 160rpx;
        height: 56rpx;
        font-size: 28rpx;
        padding: 0;
        margin-right: 16rpx;
        color: rgba(142, 84, 244, 1);
        border: 1px solid rgba(142, 84, 244, 1);
        border-radius: 420rpx;
        background-color: #fff;
        text-align: center;
        line-height: 56rpx;
      }
      .fabu {
        width: 160rpx;
        height: 56rpx;
        font-size: 28rpx;
        padding: 0;
        margin-right: 16rpx;
        background-color: rgba(142, 84, 244, 1);
        color: #fff;
        text-align: center;
        line-height: 56rpx;
        border-radius: 420rpx;
      }
    }
  }
  // .popup{
  // 			display: flex;
  //    			flex-direction: column;
  //    			justify-content: space-evenly;
  //    			align-items: center;
  // 			position: absolute;
  // 			top: 275rpx;
  //             left: -2rpx;
  // 			width: 192rpx;
  // 			height: 198rpx;
  // 			z-index: 999;
  //     		background-color: #fff;
  // 		}
  .popup-content {
    height: 800rpx;
    border-radius: 32rpx 32rpx 0 0;
    padding: 23rpx;
    .text {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 96rpx;
      width: 100%;
      border-bottom: 1px solid rgba(220, 223, 230, 1);
      font-size: 32rpx;
    }
    .danxuan {
      display: flex;
      height: 94rpx;
      align-items: center;
      border-top: 1px solid rgb(241, 241, 241);
      border-bottom: 1px solid rgb(241, 241, 241);
      .label-text {
        font-size: 28rpx;
        color: rgb(69, 70, 74);
        line-height: 48rpx;
        margin-left: 12rpx;
      }
    }
    .btntop {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 686rpx;
      height: 64rpx;
      background-color: rgb(23, 11, 26);
      line-height: 64rpx;
      font-size: 28rpx;
      color: #fff;
      border-radius: 272rpx;
      margin-top: 20rpx;
    }
    .publish {
      position: fixed;
      bottom: 10rpx;
      left: 31rpx;
      width: 686rpx;
      height: 88rpx;
      font-size: 32rpx;
      background-color: rgba(142, 84, 244, 1);
      color: #fff;
    }
  }
}
.erweima {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 630rpx;
  height: 900rpx;
  // background: url('https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/erWeiMa.png') no-repeat;
  // background-size: contain;
  .bgi {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -999;
  }
  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 430rpx;
    height: 470rpx;
    padding: 30rpx;
    background-color: #fff;
    font-size: 24rpx;
    color: rgb(69, 70, 74);
    text-align: center;
    border-radius: 24rpx;
  }
  .close {
    position: absolute;
    top: -88rpx;
    right: 0;
    width: 88rpx;
    height: 88rpx;
  }
}
.fixed {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 68rpx;
  width: 100%;
  height: 98rpx;
  text-align: center;
  font-size: 22rpx;
  color: rgb(144, 147, 153);
  z-index: 1;
  .creat-video{
    width: 88rpx;
    height: 80rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .circle {
    width: 80rpx;
    height: 80rpx;
    background: linear-gradient(
      135deg,
      rgba(85, 77, 255, 1) 100%,
      rgba(200, 104, 252, 1) 0%
    );
    margin: 0 auto;
    margin-bottom: 6rpx;
    border-radius: 50%;
  }
}
.bottom-white {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 166rpx;
  background-color: #fff;
}
</style>
